<template>
	<div class="wrap">
		<div>
			<el-steps class="steps" style="width: 1200px" :active="active" finish-status="success">
				<el-step title="组件1" />
				<el-step title="组件2" />
				<el-step title="组件3" />
			</el-steps>
			激活：{{ active }}
			<component :is="componentName" />
			<hr />
			<div class="btn-group">
				<el-button @click="save" type="danger">暂存</el-button>
				<el-button v-show="prevShow" @click="prev" type="warning">上一步</el-button>
				<el-button v-show="nextShow" @click="next" type="primary">下一步</el-button>
				<el-button v-show="submitShow" @click="submit" type="success">提交</el-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import  { defineAsyncComponent, ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { Component } from 'vue'
import { ElMessage } from "element-plus";
const Comp1 = defineAsyncComponent(() => import("./components/Comp1.vue"));
const Comp2 = defineAsyncComponent(() => import("./components/Comp2.vue"));
const Comp3 = defineAsyncComponent(() => import("./components/Comp3.vue"));
const CompFinish = defineAsyncComponent(() => import("./components/CompFinish.vue"));
const componentName = computed(() => {
	return componentList.value[active.value].componentName;
});
const $router = useRouter();
const active: any = ref(0);
const prevShow = computed(() => {
	return active.value !== 0;
});
const nextShow = computed(() => {
	return ![2, 3].includes(active.value);
});
const submitShow = computed(() => {
	return active.value === 2;
});
onMounted(() => {
	const localActive: string = localStorage.getItem("active") || "";
	active.value = localActive ? parseInt(localActive) : 0;
});
const componentList = ref<Array<{componentName: Component}>>([
	{
		componentName: Comp1
	},
	{
		componentName: Comp2
	},
	{
		componentName: Comp3
	},
	{
		componentName: CompFinish
	}
]);

function prev() {
	if (active.value < 0) {
		active.value = 0;
		return;
	}
	active.value--;
}

function save() {
	ElMessage({
		message: "操作完成",
		type: "success",
		duration: 1000
	});
	localStorage.setItem("active", active.value);
}
function next() {
	if (active.value > componentList.value.length - 1) {
		active.value = componentList.value.length - 1;
		return;
	}
	active.value++;
}

function submit() {
	active.value = componentList.value.length - 1;
	setTimeout(() => {
		ElMessage({
			message: "操作完成",
			type: "success",
			duration: 1000
		});
		$router.push({
			path: "/home"
		});
	}, 1000);
}
</script>
<style scoped>
.wrap {
	width: 1200px;
	height: 400px;
	margin: 0 auto;
}
.btn-group {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
</style>
